<template>
    <div class="recommend">
        <div class="recommend_list">
            <div class="list_item" v-for="item in recommendLists" :key="item.id">
                <div class="item_img">
                    <img :src="item.img_url" alt="">
                </div>
                <div class="item_contemt">
                    <router-link to="/SecondFood">
                    <div class="item_box">
                    <h3>{{item.name}}</h3>
                    <p>{{item.desc}}</p>
                    <span class="level">
                        <span class="star">

                            <img :src="star.star_url" v-for="star in item.stars" :key="star.id" />
                            
                            <em>{{item.star_draw}}</em>

                            <span class="level-score">分</span>
                        </span>
                    </span>
                    <div class="item_contemt_footer">
                         <span class="m_price">特价：{{item.m_price}}元</span>
                         <span class="price">门市价：{{item.price}}</span>
                         <span class="numnber">已售：{{item.number}}</span>
                    </div>
                    </div>
                    </router-link>
                </div>
            </div>
        </div>
        <div class="recommend_footer">
            <span></span>
        </div>
    </div>
</template>

<script>
export default {
    name:"FastFoodContent",
    props:{
        list:Array
    },
    data: function() {
        return {
            recommendLists: [
                {
                    id: "0001",
                    img_url: "http://p1.meituan.net/200.0/deal/8256818f0823d8ec5a89c194c0f04e9b45593.jpg@90_0_279_279a%7C267h_267w_2e_90Q",
                    name: "一把骨",
                    desc: "四川师大",
                    m_price: 36,
                    price: 55,
                    number: 123


                }
            ]
        }
    },
}
</script>


<style scoped>
    .recommend h1{
        text-align: left;
        font-size: .32rem;
        margin-top: .2rem;
    }
.list_item{
        border-top: .01rem solid #2c3e50;
        margin-top: .2rem;
        width: 100%;
        overflow: hidden;
    }
    .item_img{
        width: 30%;
        float: left;
    }
     .item_img img{
        width: 90%;
       margin-top: .1rem;
    }
    .item_contemt{
        width: 65%;
        float: right;
        text-align: left;
    }
    .item_box{
        margin: 0 .1rem;
    }
    .item_contemt_footer{
        margin-top: .1rem;
        width: 100%;
        overflow: hidden;
    }
    .item_contemt_footer span{
        float: left;
        display: block;

    }
    .item_contemt_footer span.price{
        margin-left: .3rem;
    }
    .item_contemt_footer span.number{
        float: right;
        padding-left: .1rem;
        margin-left: .3rem;   
    }
    .item_contemt_footer span.m_price{
        color: rgb(121, 236, 86);
        font-size: .4rem;
        margin-top: -.08rem;
        
    }
</style>